import React from "react";
import { NavBar, Toast } from 'antd-mobile'
import { useNavigate } from "react-router-dom";
import axios from 'axios'
import './index.scss'

import { getCurrentCity } from "../../utils";
import { List, AutoSizer } from 'react-virtualized';

import NavHeader from "../../components/NavHeader";

import {withNavigation} from '../../utils/navigate'

// 数据处理格式
// {a:[{},{}],b:[{},{}]}
// 右侧索引格式为
// [a,b]

// 数据格式化方法
// list:[{},{}]
const formatCityData = (list) => {
    const cityList = {}
    // 遍历数组中的每一项
    list.forEach(item => {
        // 获取每一个城市的首字母
        const first = item.short.substr(0, 1)
        // 判断cityList中是否有该分类
        if (cityList[first]) {
            // 如果有，直接往该分类中push数据
            cityList[first].push(item)
        } else {
            // 如果没有，就先创建一个数组，然后，把当前城市信息添加到数组中
            cityList[first] = [item]
        }
    });
    const cityIndex = Object.keys(cityList).sort()
    return {
        cityList,
        cityIndex
    }
}

// 封装处理字母索引的方法
const formatIndex = (letter) => {
    switch (letter) {
        case "#":
            return '当前定位'
            break;
        case "hot":
            return '热门城市'
            break;
        default:
            return letter.toUpperCase()
            break;
    }
}


// 索引的高度
const TITLE_HEIGHT = 36
const CITY_HEIGHT = 50

// 有房源信息的城市
const HOUSE_CITY = ['北京', '上海', '广州', '深圳']

 class CityList extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            // 城市列表
            cityList: {},
            cityIndex: [],
            // 索引高亮,默认第一个是高亮
            activityIndex: 0
        }
        // 创建ref对象
        this.cityListComponent = React.createRef()
    }

    componentDidMount() {
        // 获取城市列表，并且点击的时候进行高亮跳转
        this.require()
    }

    // 获取城市列表
    //  this.getCityList()
    // 调用measureAllRows,提前计算list中每一行的高度，实现scrollToRow的精确跳转
    // 注意：调用这个方法的时候，需要保证list组件中已经有数据了！ 如果list组件中的数据为空，就会导致调用方法出错
    // 解决：保证该方法在获取到列表后进行调用
    // this.cityListComponent.current.measureAllRows()
    async require() {
        await this.getCityList()
        this.cityListComponent.current.measureAllRows()
    }

    // 获取城市列表
    async getCityList() {
        const { data: res } = await axios.get('http://localhost:8080/area/city?level=1')
        // console.log(res);
        if (res.status !== 200) return Toast.show("数据获取异常")
        const { cityList, cityIndex } = formatCityData(res.body)
        /*
            获取热门城市
            将数据添加到cityList中
            将索引值添加到cityIndex中
        */
        const { data: hotRes } = await axios.get('http://localhost:8080/area/hot')
        cityList['hot'] = hotRes.body
        // 将索引号索引数组中，注意需要带顺序
        cityIndex.unshift('hot')

        // 获取当前城市的定位
        const curCity = await getCurrentCity()

        // 将当前城市的数据放到城市列表数据对象中
        cityList['#'] = [curCity]
        // 将索引放到列表索引中
        cityIndex.unshift('#')

        this.setState({
            cityList,
            cityIndex
        })
    }

    //  切换城市
    changeCity = ({ label, value }) => {
        if (HOUSE_CITY.includes(label)) {
            // 有房源情况
            localStorage.setItem('hkzf_city', JSON.stringify({ label, value }))
           this.props.navigate(-1)
        }else{
            Toast.show("暂无该城市数据",1)
        }

    }


    // 渲染每一行数据的渲染函数，通过他渲染内容
    rowRenderer = ({
        key, // Unique key within array of rows
        index, // 索引号
        isScrolling, //当前项是否在滚动中， 是一个bool值
        isVisible, // 当前项在列表中是可见的
        style, // 注意：重点属性，一定要给每一行添加改样式，作用：指定每一行的位置
    }) => {

        // 获取每一行的字母索引
        const { cityIndex, cityList } = this.state
        const letter = cityIndex[index]
        return (
            <div key={key} style={style} className="city">
                <div className="title">{formatIndex(letter)}</div>
                {cityList[letter].map(item => {
                    return (
                        <div className="name" key={item.value} onClick={()=>this.changeCity(item)} >
                            {item.label}
                        </div>
                    )
                })}
            </div>
        );
    }
    // 获取每一个索引城市的高度
    getRowHeight = ({ index }) => {
        // 标题的高度+所有城市的高度
        const { cityIndex, cityList } = this.state
        const world = cityIndex[index]
        const cityNum = cityList[world].length * CITY_HEIGHT
        const num = cityNum + TITLE_HEIGHT
        return num
    }
    // 渲染右侧索引列表
    renderCityInde() {
        const { cityIndex, activityIndex } = this.state
        return (cityIndex.map((item, index) => {
            return <li className="city-index-item" key={item} onClick={() => {
                // console.log("当前索引号",index);
                this.cityListComponent.current.scrollToRow(index)
            }}>
                <span className={activityIndex === index ? 'index-active' : ''}>
                    {item === 'hot' ? '热' : item.toUpperCase()}
                </span>
            </li>
        })
        )
    }
    // 用于获取list组件中渲染行的信息
    onRowsRendered = ({ startIndex }) => {
        // 页面高亮的渲染
        if (this.state.activityIndex !== startIndex) {
            this.setState({
                activityIndex: startIndex
            })
        }
    }

    render() {
        return (
            <div className="citylist">
                {/* 头部城市头 */}
                <NavHeader>城市选择</NavHeader>
                <AutoSizer>
                    {({ height, width }) => (
                        <List
                            ref={this.cityListComponent}
                            width={width}
                            height={height}
                            rowCount={this.state.cityIndex.length}
                            rowHeight={this.getRowHeight}
                            rowRenderer={this.rowRenderer}
                            onRowsRendered={this.onRowsRendered}
                            scrollToAlignment="start"
                        />
                    )}
                </AutoSizer>
                {/* 右侧索引 */}
                <ul className="city-index">
                    {this.renderCityInde()}
                </ul>

            </div>
        )
    }
}

export default withNavigation(CityList)